/**
 * 创建一个焦点图
 * 
 * 切换动画效果多样：上下切换、左右切换、渐隐切换……
 * 切换效果多样的
 * 
 * 下列代码中的问题
 *      每次子类继承都要创建一次父类，性能消耗较大 => 解决方法：共享机制
 */
// 图片轮播类
var LoopImages = function(imgArr, container) {
    this.imagesArray = imgArr;      //轮播图片数组
    this.container = container;     //轮播图片容器
    this.createImage = function() {};//创建轮播图片
    this.changeImage = function() {};//切换下一张图片
}

// 上下滑动切换类
var SlideLoopImg = function(imgArr, container) {
    // 构造函数继承图片轮播类
    LoopImages.call(this, imgArr, container);
    // 重写继承的切换下一张图片的方法
    this.changeImage = function() {
        console.log('SlideLoopImg changeImage function');
    }
}

// 渐隐切换类
var FadeLoopImg = function(imgArr, container, arrow) {
    LoopImages.call(this, imgArr, container);
    this.arrow = arrow;
    this.changeImage = function() {
        console.log('FadeLoopImg');
    }
}

// 实例化一个渐隐切换图片类
var fadeImg = new FadeLoopImg([
    'imgs/1.jpg',
    'imgs/1.jpeg',
    'imgs/1.jpeg',
    'imgs/1.jpeg'    
], 'slide', [
    'imgs/left.png',
    'imgs/right.png'
]);

fadeImg.changeImage();
